<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <link class="theme" rel="stylesheet" type="text/css" href="./css/color/blue.css" />
    <script type="text/javascript" src="./script/doT.min.js"></script>
</head>
<body>
  <div class="head">
    <div class="head-s">
      <span><div id='topbar'>市管领导干部信息查询系统--分类查询</div></span>
      <div class="head-r"><i class="fa fa-user-circle-o" onclick="user()"></i></div>
    </div>
  </div>
    <!-- <header class="aui-bar aui-bar-nav header">
        <a class="aui-pull-left">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title"><span>市管领导干部信息查询系统--分类查询</span></div>
        <a class="aui-pull-right aui-btn">
            <span class="fa fa-user-circle-o" onclick="user()"></span>
        </a>
    </header> -->
    <div class="header-d"></div>
    <div id="list">
    </div>
    <script type='text/template' id='template'>
        <div class="classify-nav">
            <ul>
                {{~it :value:index}}
                <li id='I{{=index}}'   onclick="nav({{=index}})">{{=value.DName}}</li>

                 {{~}}
            </ul>
        </div>
    </script>


</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/aui-tab.js"></script>
<script type="text/javascript">

function user() {
    api.openWin({
        name: 'user',
        url: './user.html',
    });
}
    function nav(index) {
      // alert(index);return;
      var cl ='#I'+index;
      $('li').removeClass('active');
      $(cl).addClass('active');
      api.setFrameGroupIndex({
          name: 'classifyGrop',
          index: index,
          reload: true,
      });
    }
    // tab切换
    apiready = function() {
      var color = $api.getStorage('color');
      $(".theme").attr("href", color);
        api.parseTapmode();

        var tempId;
        var db = api.require('CPDB');
        db.selectSql({
            name: 'data',
            sql: "SELECT * FROM base_level WHERE PID = 0 ORDER BY isort"
        }, function(ret, err) {
            if (ret.status) {
                tempId = ret.data[0].ID;
                title = ret.data;
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret.data);
                var list = $api.byId('list');
                $api.html(list, html);
                //分类
                $('#I0').addClass('active');
            } else {
                alert(JSON.stringify(err));
            }
        });
        classify();


    }


    function classify() {

        api.openFrameGroup({
            name: 'classifyGrop',
            background: '#fff',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: 160,
                w: 'auto',
                // h: api.winHeight - 210
                marginBottom:70

            },
            index: 0,
            frames: [{
                name: 'classifynav0',
                url: './classifynav0.html',
                bgColor: '#fff'
            }, {
                name: 'classifynav1',
                url: 'classifynav1.html',
                bgColor: '#fff'
            }, {
                name: 'classifynav2',
                url: 'classifynav2.html',
                bgColor: '#fff'
            }, {
                name: 'classifynav3',
                url: 'classifynav3.html',
                bgColor: '#fff'
            },
            //  {
            //     name: 'classifynav4',
            //     url: 'classifynav4.html',
            //     bgColor: '#fff'
            // }
          ]
        }, function(ret, err) {
            if (ret) {
                //  alert( JSON.stringify( ret ) );
            } else {
                alert(JSON.stringify(err));
            }
        });
    }

    function changeColor(){
      var color = $api.getStorage('color');
      $(".theme").attr("href", color);
      nav(0);

    }

    var tab = new auiTab({
        element: document.getElementById("tab"),
    }, function(ret) {
        console.log(ret)
    });
</script>

</html>
